<script>
import { getMoreVideos } from '../api/video'
import { useStore } from "vuex";
import { ref,watch } from "vue";
import { useRoute } from 'vue-router'
import { useRouter } from 'vue-router'

export default {

    setup() {
    const store = useStore();
    const route = useRoute()
    const router = useRouter()

    //首次加载5条
    const index = ref(5)

    //获取路由参数-视频类型
    const typeId = ref(route.query.id)
    //获取原生DOM
    const scrollRef = ref(null)

    //获取vuex state数据-视频ID
    let videoId = ref(store.state.videoId);
    // 视频总列表
    let videolist = ref(null)
    // 当前播放视频
    let currentVideo = ref(null)
    //加载动画
    let loading = ref(false)
    //当前电影下标
    let Dataindex = ref(null)
    //当前电影评论下标
    let commitIndex = ref(null)
    //从本地获取视频信息
    let localvideoList = JSON.parse(window.localStorage.getItem('videoInfo'))==null?[]:JSON.parse(window.localStorage.getItem('videoInfo'))
    //从本地获取评论信息
    let commitlist = JSON.parse(window.localStorage.getItem('commitlist'))==null?ref([]):ref(JSON.parse(window.localStorage.getItem('commitlist')))
    // 当前评论
    let newCommit = ref(null)
    // 获取视频数据
    getMoreVideos(typeId.value).then((data)=>{
        videolist.value=data.data.feeds
        if (videoId.value) {
            Dataindex.value = data.data.feeds.findIndex(item=>item.id==videoId.value)
            currentVideo.value = data.data.feeds[Dataindex.value]
            videolist.value.splice(Dataindex.value,1)
            videolist.value.unshift(currentVideo.value)
            if (localvideoList) {
              currentVideo.value = newCurrentVideo(localvideoList); 
            }
            commitIndex.value = commitlist.value.findIndex(item=>item.id==currentVideo.value.id)
            newCommit.value=commitlist.value[commitIndex.value]==undefined?[]:commitlist.value[commitIndex.value].commiInfo
            if (commitIndex.value!=-1) {
                currentVideo.value.commentCount=newCommit.value.length
            }else{
                currentVideo.value.commentCount=0
                commitIndex.value=0
            }
            // console.log(commitIndex.value);
        }
        // console.log(videolist.value);
    })

    //更新数据
    let newCurrentVideo = (arr) =>{
        arr.forEach(item=>{
             if (item.id==currentVideo.value.id) {           
                    currentVideo.value.alreadyUp=item.alreadyUp
                    currentVideo.value.upCount=item.upCount
                }
        })
        return currentVideo.value
    }
    // 获取vieo标签原生DOM
    const video = ref(null)
    //播放视频
    const playVdeo = ref(true)
    // 判断视频播放暂停
    const flag = ref(false)

    let timeLeft =ref(0);//左边时间
    let timeRight = ref(0); //右边时间
    let currentPlay = ref(0);

    // 播放视频方法
    let play = () =>{
        video.value.play()
        video.value.style.position= 'relative'
        playVdeo.value=false
        loading.value=true
    }
    let iconPlay = ref(false);

    //实时获取视频进度
    let ontimeupdateFun = () =>{
        timeLeft.value = video.value.currentTime//实时获取视频播放时间
        if (timeLeft.value>0.5) {
            loading.value=false
        }
        currentPlay.value = 100 * ( timeLeft.value / timeRight.value); //// 计算进度条值
            
    }
    //等待mp4加载完
    let onloadeddataFun = () => {
      timeRight.value = video.value.duration; //获取总时长
    };
    // 滚动条随时间实时变化
    let sliderInputFun = (value) => {
       
      let currentTime = (value / 100) * timeRight.value;
      timeLeft.value = currentTime;
      video.value.currentTime = currentTime;
    };

    //控制进度条开始与结束之间效果
    let sliderDragStartFun = () => {
      video.value.pause(); //暂停
      iconPlay.value = true;
    };
    let sliderDragEndFun = () => {
      video.value.play(); //播放
      iconPlay.value = false;
      flag.value=false
    };

    // 视频播放暂停方法
    let actionVideo = () =>{
        if (flag.value==false) {
            video.value.pause()
        }else{
            video.value.play()
        }
        flag.value=!flag.value
        iconPlay.value = !iconPlay.value;
    }

    // 播放暂停
    let togglePlay = () => {
      if (iconPlay.value) {
        //播放
        video.value.play();
        ontimeupdateFun();
        flag.value = false;
      } else {
        //暂停
        video.value.pause();
        flag.value = true;
      }
      iconPlay.value = !iconPlay.value;
    };

    // 时长转换
    let playerTime = (data) => {
      let m = parseInt(data / 60); //分钟
      let s = parseInt(data % 60); //秒
      if (m == 0 && s == 0) {
        return "0:00";
      } else {
        return m + ":" + (s < 10 ? "0" + s : s); //0:01
      }
    }

    // 选择列表视频
    let selectVideo = (id) =>{
        flag.value=false
        loading.value=true
        videoId.value = id
        commitIndex.value = commitlist.value.findIndex(item=>item.id==id)
        newCommit.value=commitlist.value[commitIndex.value]==undefined?[]:commitlist.value[commitIndex.value].commiInfo
        if (videolist.value) {
            let index = videolist.value.findIndex(item=>item.id==videoId.value)
            currentVideo.value = videolist.value[index]
            currentVideo.value.commentCount=newCommit.value.length
            if (localvideoList) {
              currentVideo.value = newCurrentVideo(localvideoList); 
            }
            video.value.play()
            video.value.style.position= 'relative'
            video.value.autoplay=true
            playVdeo.value=false
            scrollRef.value.scrollTop= 0
        }
    }

    //点赞
    let dzFun = () =>{
        let token = window.localStorage.getItem("token");
        if (!token) {
            router.push("/login");
            return
        } 
        currentVideo.value.alreadyUp=!currentVideo.value.alreadyUp
        let index = localvideoList.findIndex(item=>item.id==currentVideo.value.id)
        if (currentVideo.value.alreadyUp) {
            currentVideo.value.upCount=currentVideo.value.upCount+1
            // console.log(index);
            if (index==-1) {
                let temp = {
                    id:currentVideo.value.id,
                    alreadyUp:currentVideo.value.alreadyUp,
                    upCount:currentVideo.value.upCount,
                    commentCount:currentVideo.value.commentCount,
                }
                localvideoList=[...localvideoList,temp]
            }else{
                localvideoList[index].alreadyUp=currentVideo.value.alreadyUp
                localvideoList[index].upCount=currentVideo.value.upCount
            }
            window.localStorage.setItem('videoInfo',JSON.stringify(localvideoList))
        }else{
            currentVideo.value.upCount=currentVideo.value.upCount-1
            if (index!=-1) {
                localvideoList.splice(index,1)
                window.localStorage.setItem('videoInfo',JSON.stringify(localvideoList))
            }
        }
        

    }

    //查看更多
    let getMore = () =>{
        index.value=videolist.value.length
    }

    //评论内容
    const word = ref('')

    let commit = ref({
        id:null,
        commiInfo:[]
    })

    //添加评论
    let addword =() =>{
        let token = window.localStorage.getItem("token");
        if (!token) {
            router.push("/login");
            return
        } 
        sendflag.value=false
        commitIndex.value = commitlist.value.findIndex(item=>item.id==currentVideo.value.id)
        let index = localvideoList.findIndex(item=>item.id==currentVideo.value.id)
        if (commitIndex.value!=-1) {
            commitlist.value[commitIndex.value].commiInfo = [...commitlist.value[commitIndex.value].commiInfo,{
                name:'小赵',
                content:word.value,
                alreadyZan:false,
                time:new Date().getTime()
            }]
        }else{
            commit.value.id=currentVideo.value.id
            commit.value.commiInfo = [...commit.value.commiInfo,{
                name:'小赵',
                content:word.value,
                alreadyZan:false,
                time:new Date().getTime()
            }]
             commitlist.value=[...commitlist.value,commit.value]
        }


        window.localStorage.setItem('commitlist',JSON.stringify(commitlist.value))
        if (index!=-1) {
            if (commitIndex.value!=-1) {
                 localvideoList[index].commentCount=commitlist.value[commitIndex.value].commiInfo.length
            }else{
                 localvideoList[index].commentCount =0    
            }
            window.localStorage.setItem('videoInfo',JSON.stringify(localvideoList))
        }else{
            if (commitIndex.value!=-1) {
                let temp = {
                id:currentVideo.value.id,
                alreadyUp:currentVideo.value.alreadyUp,
                upCount:currentVideo.value.upCount,
                commentCount:commitlist.value[commitIndex.value].commiInfo.length,
            }
            localvideoList=[...localvideoList,temp]
            window.localStorage.setItem('videoInfo',JSON.stringify(localvideoList))
            }
        }
        if (commitIndex.value!=-1) {
            newCommit.value=commitlist.value[commitIndex.value].commiInfo
            currentVideo.value.commentCount=newCommit.value.length
        }else{
            newCommit.value = commit.value.commiInfo
            currentVideo.value.commentCount=newCommit.value.length
        }
        word.value=''
    }

    //评论时间判断
    let sendTime = (value) =>{
        let time = new Date()
        let times = time.getTime()
        let nowtime = times-value
        if (nowtime < 0) {

            return ''

        } else if ((nowtime / 1000 < 30)) {

            return '刚刚'

        } else if (nowtime / 1000 < 60) {

            return parseInt((nowtime / 1000)) + '秒前'

         } else if ((nowtime / 60000) < 60) {

            return parseInt((nowtime / 60000)) + '分钟前'

        } else if ((nowtime / 3600000) < 24) {

            return parseInt(nowtime / 3600000) + '小时前'

        } else if ((nowtime / 86400000) < 31) {

            return parseInt(nowtime / 86400000) + '天前'

        } else if ((nowtime / 2592000000) < 12) {

            return parseInt(nowtime / 2592000000) + '月前'

        } else {

            return parseInt(nowtime / 31536000000) + '年前'

        }

    }

    //发送按钮颜色
    let sendColor = ref(false)
    watch(word,()=>{
        if (word.value!='') {
            sendColor.value=true
        }else{
            sendColor.value=false
        }
    })

    //发送按钮的显隐
    let sendflag = ref(false)
    // input失去焦点
    let blur =() =>{
        if (word.value=='') {
            sendflag.value=false
        }

    }
    // input获取焦点
    let focus = () =>{
        sendflag.value=true
        scrollRef.value.scrollTop=scrollRef.value.children[0].clientHeight

    }
    //查看评论
    let gopl = () =>{
        scrollRef.value.scrollTop=scrollRef.value.children[0].clientHeight-scrollRef.value.children[0].children[2].clientHeight
    }

    //评论点赞
    let dz = (index) =>{

        commitIndex.value = commitlist.value.findIndex(item=>item.id==currentVideo.value.id)
        if (commitIndex.value==-1) {
            commitIndex.value=0
        }
        newCommit.value[index].alreadyZan=!newCommit.value[index].alreadyZan
        commitlist.value[commitIndex.value].commiInfo=newCommit.value
        window.localStorage.setItem('commitlist',JSON.stringify(commitlist.value))
    }

    //删除评论
    let del =(index) =>{
        newCommit.value.splice(index,1)
        if (commitIndex.value!=-1) {
            commitlist.value[commitIndex.value].commiInfo=newCommit.value
            currentVideo.value.commentCount=newCommit.value.length
            window.localStorage.setItem('commitlist',JSON.stringify(commitlist.value))
        }else{
            // commitlist.value[commitIndex.value].commiInfo=newCommit.value
            currentVideo.value.commentCount=0
            window.localStorage.setItem('commitlist',JSON.stringify(commitlist.value))
        }
    }

    //过滤时间
    let time = (value) =>{
      let leftTime = parseInt(value/60)>=10?parseInt(value/60):'0'+parseInt(value/60)
      let rightTime = value%60>=10?value%60:'0'+value%60
      return `${leftTime}:${rightTime}`
    }


    //返回主页
    let goback = () =>{
        router.push('/videos')
    }

    //拖拽返回
    const startX = ref(null)
    const endX = ref(null)
    const startY = ref(null)
    const endY = ref(null)
    const back = ref(null)

    //开始
    let touchstartHandle = (e) =>{
        startX.value=e.changedTouches[0].clientX
        startY.value=e.changedTouches[0].clientY
        if (startY.value>245) { 
            back.value.style.top=startY.value-45 + 'px'
        }
        
    }
    // 移动
    let touchmoveHandle = (e) =>{
        let movex = e.changedTouches[0].clientX
        if (startX.value<=150 && startY.value>245) {
        back.value.style.width=String(movex) +'px'
        }
    }
    // 结束
    let touchendHandle = (e) =>{
        back.value.style.width = '0px'
        endX.value=e.changedTouches[0].clientX
        endY.value=e.changedTouches[0].clientY
        let x = parseInt(endX.value-startX.value)   
        let y = Math.abs(parseInt(endY.value-startY.value))
        if (x>70 && y<10 && startX.value<150 && startY.value>245) {
            video.value.pause()
            setTimeout(() => {
                router.push('/videos')
            }, 500);
        }
    }

    return {
      videoId,
      currentVideo,
      video,
      play,
      playVdeo,
      actionVideo,
      flag,
      typeId,
      videolist,
      time,
      selectVideo,
      scrollRef,
      goback,
      touchstartHandle,
      touchmoveHandle,
      touchendHandle,
      startX,
      endX,
      back,
      index,
      getMore,
      loading,
      ontimeupdateFun,
      onloadeddataFun,
      sliderInputFun,
      sliderDragStartFun,
      sliderDragEndFun,
      playerTime,
      timeLeft,
      timeRight,
      currentPlay,
      iconPlay,
      togglePlay,
      dzFun,
      word,
      addword,
      commitlist,
      newCommit,
      dz,
      blur,
      focus,
      sendflag,
      sendColor,
      gopl,
      sendTime,
      del
    };
  },

};
</script>

<template>
  <div class="page-feedvideo" ref="scrollRef" @touchstart="touchstartHandle($event)" @touchmove="touchmoveHandle($event)" @touchend="touchendHandle($event)">
    <div class="container_wrap"  v-if="currentVideo">
    <!-- 播放视频 -->
      <div class="video_wrap">
        <div :class="['back-nav', {'active':flag}]">
            <span class="back-icon" @click="goback"></span>
            <span class="header-title line-ellipsis">{{currentVideo.title}}</span>
        </div>
        <div class="video_block" v-if="currentVideo.video">
          <video
            :class="['video-play',{'video-loading':!playVdeo}]"
            style="position: absolute"
            preload="auto"
            :src="currentVideo.video.url"
            loop=""
            playsinline="true"
            ref="video"
            @timeupdate="ontimeupdateFun"
            @loadeddata="onloadeddataFun"
            @ended="onendedFun"
          >
          </video>
          <div :class="['control-bar', 'control-bar-flex', { hidden: flag }]">
              <div class="play-pause play" @click="togglePlay">
                <img src="../assets/images/播放2.png" v-if="iconPlay" alt="" />
                <img
                  src="../assets/images/播放暂停.png"
                  v-if="!iconPlay"
                  alt=""
                />
              </div>
              <div class="step">
                <van-slider
                  v-model="currentPlay"
                  bar-height="2px"
                  active-color="#ee0a24"
                  @update:model-value="sliderInputFun"
                  @drag-start="sliderDragStartFun"
                  @drag-end="sliderDragEndFun"
                />
              </div>
              <div class="timeline">
                <span class="currentTime">{{ playerTime(timeLeft) }}</span>
                <span class="duration">/{{ playerTime(timeRight) }}</span>
              </div>
              <div class="fullscreen"></div>
            </div>
          <div :class="['transparentContent',{'transparentContent-loading':!playVdeo}]" @click="actionVideo"></div>
          <div class="loadingImg" v-if="playVdeo">
            <img v-if="currentVideo.video" :src="currentVideo.video.imgUrl" alt="">
            <img v-else :src="currentVideo.images.url" alt="">
            <div class="pauseIcon" @click="play"></div>
          </div>
        </div>
        <div class="movie-info">
            <div class="info-title">{{currentVideo.title}}</div>
            <div class="info-content">
                <div class="content-left">
                    <img class="c-pic" :src="currentVideo.user.avatarurl" alt="">
                    <div class="c-text">{{currentVideo.user.nickName}}</div>
                    <img src="../assets/images/vip.png" alt="" v-if="currentVideo.user.followed" class="c-icon">
                </div>
            </div>
        </div>
      </div>
    <!-- 更多视频 -->
    <div class="video-container">
        <div class="video-title">
            更多视频
        </div>
        <section class="video-list" v-if="videolist">
            <ul class="video-ul">
                <div>
                    <li class="video-item" v-for="item in videolist.slice(0,index)" :key="item.id" @click="selectVideo(item.id)">
                        <div class="inner">
                            <div class="left-img" v-if="item.video">
                                <img :src="item.video.imgUrl" alt="" class="movie-img">
                                <span class="txt" v-if="item.id==currentVideo.id">播放中</span>
                                <span class="txt" v-if="item.id!=currentVideo.id">{{time(item.video.dur)}}</span>
                                <img src="../assets/images/playerIcon.png" v-if="item.id!=currentVideo.id" alt="" class="player">
                            </div>
                            <div class="left-img" v-else>
                                <img :src="item.images[0].url" alt="">
                            </div>
                            <div class="right-title">
                                <div :class="['main-title',{'red-title':item.id==currentVideo.id}]">
                                    {{item.title}}
                                </div>
                            </div>
                        </div>
                    </li>
                </div>
            </ul>
        </section>
        <div class="more" @click="getMore" v-if="index!=videolist.length">查看更多</div>
    </div>
    <div class="commit-wrap">
        <div class="commit-title">评论 <span>({{currentVideo.commentCount}})</span></div>
         <div class="commit-con" v-if="currentVideo.commentCount!=0">
            <div class="comment-box" v-for="(item,index) in newCommit" :key="index">
            <!-- <img src="" alt="" class="avatar"> -->
            <span class="avatar"></span>
            <div class="right">
                <div class="top-box">
                    <div class="name-box">
                        <span class="nick">{{item.name}}</span>
                        <div class="nick-level"></div>
                    </div>
                    <div class="time-box">
                        <time>{{sendTime(item.time)}}</time>
                    </div>
                    <div class="more-box" @click="del(index)">
                        <img src="../assets/images/叉叉.png" alt="" class="more-img">
                    </div>
                </div>
                <div class="content">{{item.content}}</div>
                <div class="bottom">
                    <div class="appro-box" @click="dz(index)">
                        <img v-if="!item.alreadyZan" src="../assets/images/video-praise.png" alt="" class="zan-img">
                        <img v-else src="../assets/images/video-praised.png" alt="" class="zan-img">
                        <span v-if="!item.alreadyZan" class="zan-span">赞</span>
                        <span v-else class="zan-span">1</span>
                    </div>
                </div>
            </div>
            </div>
        </div>
        <div class="nothing" v-if="currentVideo.commentCount==0">
            <img src="../assets/images/nothing.png" alt="">
            <div>啥也没有啊~</div>
        </div>
    </div>
    <div class="replay-con">
        <div :class="['replay-left',{'upwidth':sendflag}]">
            <input type="text" v-model="word"  @blur="blur" @focus="focus"  placeholder="写评论">
        </div>
        <div class="replay-right" v-if="!sendflag">
            <div :class="['zan',{'active':currentVideo.alreadyUp}]" @click="dzFun">
                <img v-if="!currentVideo.alreadyUp" src="../assets/images/video-praise.png" alt="">
                <img v-else src="../assets/images/video-praised.png" alt="">
            </div>
            <div class="pl" @click="gopl">
                <img src="../assets/images/video-comment.png" alt="">
            </div>
            <div class="fx">
                <img src="../assets/images/video-share.png" alt="">
            </div>
        </div>
        <div class="replay-right" v-if="sendflag">
            <span :class="['send',{'sendactive':sendColor}]" @click="addword">发送</span>
        </div>
    </div>
    </div>
    <div class="lodaing" v-if="loading">
            <div class="img">
          <img class="img1" src="../assets/images/bms.png" alt="" />
          <img class="img2" src="../assets/images/maoyan02.png" alt="" />
            </div>
            <div class="loading-title line-ellipsis">即将播放:{{currentVideo.title}}</div>
         </div>
    <div class="tag_back" ref="back">
        <span class="tag_icon"></span>
    </div>
  </div>
</template>

<style lang="less" scoped>
.page-feedvideo{
    width: 100%;
    height: 100%;
    position: relative;
    overflow-y: scroll;
    box-sizing: border-box;
    background-color: #fff;

    .container_wrap{
        position: relative;
        width: 100%;
        height: auto;
        background-color: #f4f4f4;

        .video_wrap{
            position: relative;
            width: 100%;
            height: auto;
            font-size: 0;
            overflow: hidden;

            .back-nav{
                width: 100%;
                height: 35px;
                background-color: rgba(0, 0, 0, 0.6);
                display: flex;
                align-items: center;
                position: absolute;
                top: 0;
                z-index: 5;
                transition: all 0.5s linear;
                // transform: translateY(-35px);
                opacity: 0;

                .back-icon {
                    display: inline-block;
                    width: 11px;
                    height: 11px;
                    margin-left: 15px;
                    position: relative;

                    &::before{
                        content: '';
                        position: absolute;
                        top: 0;
                        width: 100%;
                        height: 100%;
                        box-sizing: border-box;
                        border-bottom: 2px solid #fff;
                        border-left: 2px solid #fff;
                        transform: rotate(45deg);
                    }
                }
                .header-title{
                    padding: 0 10px;
                    box-sizing: border-box;
                    font-size: 14px;
                    line-height: 35px;
                    height: 100%;
                    flex: 0 0 300px;
                    color: #fff;                  
                }
            }
            .active {
                // transform: translateY(0px);
                opacity:1;
            }
            .video_block{
                width: 100%;
                height: auto;
                padding: 0;
                text-align: center;
                line-height: 0;
                transform: translateZ(0);
                overflow: hidden;

                .video-play {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: auto;
                    z-index: -1;
                }
                
                .video-loading {
                    z-index: 1;
                }
                .transparentContent {
                    position: absolute;
                    top: 20%;
                    z-index: -1;
                    width: 100%;
                    height: 60%;
                    background-color: hsla(0,0%,100%,0);
                }
                .transparentContent-loading{
                    z-index: 2;
                }
                .loadingImg{
                    width: 100%;
                    height: 230px;
                    position: relative;

                    &>img{
                        width: 100%;
                        display: block;
                    }
                    .pauseIcon{
                        width: 42px;
                        height: 42px;
                        margin-left: -21px;
                        margin-top: -21px;
                        background: url("../assets/images/loadingPlay.png") no-repeat;
                        background-size: contain;
                        position: absolute;
                        top: 50%;
                        left: 50%;
                    }
                }
                .control-bar-flex {
            height: 40px;
            display: flex;
            position: absolute;
            left: 0;
            bottom: 0;
            right: 0;
            height: 40px;
            background-color: rgba(34, 34, 34, 0.9);
            // transform: translateZ(0);
            transition: all 0.5s linear;
            opacity: 0;
            color: #fff;
            z-index: 1;

            .play-pause {
              float: none;
              height: 40px;
              width: 40px;
              line-height: 40px;
              text-align: center;
              display: flex;
              align-items: center;
              justify-content: center;

              & > img {
                display: inline-block;
                width: 10.5px;
                height: 15.2px;
              }
            }
            .step {
              position: relative;
              left: 11px;
              flex: 1;
              margin-right: 10px;

              .background {
                position: absolute;
                top: 18px;
                width: 100%;
                height: 2px;
                background-color: #666;
              }
              .loaded {
                width: 72.8382%;
                position: absolute;
                top: 18px;
                width: 0;
                height: 2px;
                background-color: #ccc;
              }
              .current {
                width: 33.8235%;
                position: absolute;
                top: 18px;
                width: 0;
                height: 2px;
                background-color: #dd403b;
                transition: width 1s linear;

                .vernier {
                  position: absolute;
                  top: -10px;
                  right: -14px;
                  width: 12px;
                  height: 12px;
                  border-radius: 50%;
                  background-color: #fff;
                  background-clip: padding-box;
                  border: 5px solid hsla(0, 0%, 100%, 0.6) !important;
                }
              }
              .current-pause {
                transition: none;
              }
            }
            .timeline {
              float: none;
              margin: 0 0 0 17px;
              line-height: 40px;
              font-size: 11px;
              .currentTime {
                color: #eee;
              }
              .duration {
                color: #999;
              }
            }
            .fullscreen {
              float: none;
              height: 40px;
              width: 15px;
            }
          }
          .control-bar.hidden {
            // transform: translate3d(0, 46px, 0);
            opacity: 1;
          }
            }
            .movie-info{
                padding: 14px 15px 15px 15px;
                opacity: .9;
                background-color: #fff;

                .info-title{
                    font-size: 15px;
                    color: #333;
                    line-height: 22px;
                }
                .info-content{
                    margin-top: 8px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    .content-left{
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;

                        .c-pic{
                            width: 23px;
                            height: 23px;
                            border-radius: 100%;
                            border: 1px solid #fff;
                        }
                        .c-text {
                            font-size: 13px;
                            color: #333;
                            margin: 0 4px 0 8px;
                        }
                        .c-icon {
                            width: 12px;
                            height: 12px;
                        }
                    }
                }
            }
        }
    }
    .video-container{
        background-color: #fff;
        border-top: 1px solid #f5f5f5;
        padding-top: 20px;
        .video-title{
                    font-weight: 500;
                    font-family: PingFangSC-Medium;
                    font-size: 15px;
                    color: #333;
                    letter-spacing: 0;
                    line-height: 23px;
                    height: 23px;
                    padding-left: 15px;
        }
        .video-list{
                    background-color: #fff;

                    .video-ul{
                        margin: 0;
                        padding: 0;
                        background: #fff;

                        &>div{
                            .video-item{
                                height: 100px;
                                width: 100%;
                                display: flex;
                                align-items: center;
                                justify-items: center;
                                padding-left: 15px;
                                box-sizing: border-box;

                                .inner{
                                    border-bottom: 1px solid #e8e8e8;
                                    padding-right: 15px;
                                    height: 100px;
                                    width: 100%;
                                    display: flex;
                                    align-items: center;
                                    justify-items: center;

                                    .left-img{
                                        position: relative;
                                        height: 70px;
                                        font-weight: 500;
                                        font-family: PingFangSC-Medium;
                                        font-size: 11px;
                                        color: #fff;

                                        .movie-img{
                                            width: 124px;
                                            height: 70px;
                                            border-radius: 3px;
                                        }
                                        .label{
                                            color: #fff;
                                            position: absolute;
                                            left: 3px;
                                            top: 3px;
                                            height: 15px;
                                            padding: 1.5px;
                                            line-height: 15px;
                                            background: rgba(0,0,0,.75);
                                            border-radius: 2px;
                                            font-weight: 500;
                                            opacity: .9;
                                            font-size: 9px;
                                            vertical-align: middle;
                                            text-align: center;
                                        }
                                        .txt{
                                            position: absolute;
                                            top: 50px;
                                            left: 7px;
                                            color: #fff;
                                        }
                                        .player{
                                            width: 20px;
                                            height: 20px;
                                            position: absolute;
                                            left: 50%;
                                            top: 50%;
                                            transform: translate(-50%,-50%);
                                        }
                                    }
                                    .right-title{
                                        flex: 1;
                                        margin-left: 10px;

                                        .main-title  {
                                            font-weight: 500;
                                            font-family: PingFangSC-Medium;
                                            font-size: 15px;
                                            color: #333;
                                            letter-spacing: 0;
                                            line-height: 23px;
                                            display: -webkit-box;
                                            overflow: hidden;
                                            -webkit-line-clamp: 2;
                                            -webkit-box-orient: vertical;
                                        }
                                        .red-title{
                                            color: #f03d37;
                                        }
                                    }
                                }
                            }
                        }
                    }
        }
    }
    .tag_back{
        position: absolute;
        left: -4px;
        top: 50%;
        width: 0px;
        max-width: 20px;
        height: 90px;
        background-color: rgba(0, 0, 0, 0.4);
        border-top-right-radius: 50% 50%;
        border-bottom-right-radius: 50% 50%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        transition: all 0.2s ease-in-out;

        .tag_icon{
           display: inline-block;
           width: 8px;
           height: 8px;
           position: relative;
           margin-right: 5px;
            &::after{
                content: '';
                position: absolute;
                top: 0;
                width: 100%;
                height: 100%;
                box-sizing: border-box;
                border-bottom: 2px solid #fff;
                border-left: 2px solid #fff;
                transform: rotate(225deg);
            }
        }
    }
    .more{
        width: 100%;
        height: 45px;
        line-height: 45px;
        text-align: center;
        color: #000;
        opacity: 0.8;
        font-size: 15px;
        margin-bottom: 10px;
    }
    .commit-wrap{
        padding: 0 15px;
        margin-top: 8px;
        background-color: #fff;

        .commit-title{
            padding: 10px 0;
            border-bottom: 1px solid #f5f5f5;
            font-size: 15px;
            font-weight: bold;

            &>span{
                color: #999;
                font-size: 14px;
                
            }
        }

        .comment-box{
                margin-top: 26px;
                display: flex;
                align-items: flex-start;
                border-bottom: 1px solid #f5f5f5;

                .avatar{
                    width: 34px;
                    height: 34px;
                    border-radius: 50%;
                    background-image: url('../assets/images/maouanloading.png');
                    background-repeat: no-repeat;
                    background-size: cover;
                    overflow: hidden;
                }
                .right {
                    flex: 1;
                    margin-left: 11px;
                    padding-bottom: 15px;
                    position: relative;

                    .top-box{
                        height: 35px;
                        position: relative;

                        .name-box{
                            display: flex;
                            height: 18px;
                            align-items: center;

                            .nick{
                                display: inline-block;
                                max-width: 150px;
                                color: #333;
                                font-size: 12px;
                                font-style: normal;
                                vertical-align: inherit;
                                text-overflow: ellipsis;
                                overflow: hidden;
                                white-space: nowrap;
                            }
                            .nick-level {
                                margin-left: 5px;
                                display: inline-block;
                                width: 36.5px;
                                height: 17px;
                            }
                        }
                        .time-box{
                            height: 18px;
                            position: absolute;
                            top: 21px;
                            font-weight: 400;
                            font-family: PingFangSC-Regular;
                            font-size: 12px;
                            color: #999;
                            letter-spacing: 0;
                            line-height: 18px;
                        }
                        .more-box{
                            position: absolute;
                            display: flex;
                            align-items: center;
                            width: 13px;
                            height: 17px;
                            right: 18px;
                            top: 0px;

                            .more-img{
                                width: 13px;
                                height: 13px;
                                background: none;
                            }
                        }
                    }
                    .content{
                        height: 21px;
                        margin-top: 6px;
                        font-family: PingFangSC-Regular;
                        font-size: 15px;
                        color: #333;
                        letter-spacing: 0;
                        text-align: justify;
                        line-height: 21px;
                        padding-right: 15px;
                    }
                    .text-expander{
                        cursor: pointer;
                        margin: 10px 15px 0 0;
                        background: #f5f5f5;
                        border-radius: 2px;
                        padding: 9px 8px;
                        font-family: PingFangSC-Regular;
                        font-size: 13px;
                        color: #2a2a2a;
                        text-align: justify;
                        line-height: 18px;

                        .text-expander-content{
                            max-height: 5000px!important;
                            overflow: hidden;
                            text-overflow: ellipsis;

                            .ref-name{
                                color: #4e759e;
                            }
                        }
                    }
                    .bottom{
                        margin-top: 15px;
                        height: 15px;
                        display: flex;
                        justify-content: flex-end;
                        align-items: center;
                        padding-right: 15px;
                        font-family: PingFangSC-Regular;
                        font-size: 12px;
                        font-weight: 400;
                        color: #666;

                        .appro-box{
                            width: auto;
                            padding:2px 8px;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            border: 1px solid #ccc;
                            border-radius: 18px;
                            .zan-img{
                                width: 13px;
                                height: 13px;
                                background: inherit;
                                margin-right: 3px;
                            }
                            .zan-span{
                                line-height: 15px;
                            }
                        }
                    }
                }
        }
        .comment-box:last-child{
            margin-bottom: 40px;
        }
    }
    &::-webkit-scrollbar {
    display: none;
  }
  .nothing{
    width: 100%;
    height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    &>img{
        width: 100px;
        height: 100px;
        display: block;
        margin-bottom: 10px;
    }

  }
}
.replay-con{
    width: 100%;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;

    .replay-left {
        width: 60%;
        margin-left: 10px;
        transition: all 0.3s linear;
        &>input{
            width: 100%;
            outline: none;
            background-color: #f5f5f5;
            border: none;
            padding: 5px 20px;
            box-sizing: border-box;
            border-radius: 20px;
            font-size: 14px;
        }
    }
    .replay-right{
        flex: 1;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        .pl,
        .fx,
        .zan{
            width: 20px;
            height: 20px;
            display: block;
            position: relative;
        }
        .zan {

            .total{
                font-size: 12px;
                transform: scale(0.85);
                position: absolute;
                top: -5px;
                right: -7px;
            }
        }
        .send{
            font-size: 13px;
            color: #999;
            font-weight: bold;
            border: 1px solid #f5f5f5;
            border-radius: 12px;
            padding: 5px 10px;
            transition: all 0.3s linear;
        }

        .sendactive{
            border-color: #f03d37;
            color: #f03d37;
        }

        .active {
            color: #f03d37;
        }
    }
    .upwidth {
        width: 75%;
    }
}


@keyframes animation1 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.lodaing {
  width: 100%;
  height: 211px;
  background-color: #000;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9;

  .img {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    width: 30px;
    height: 30px;

    img {
      position: relative;
      width: 100%;
      height: 100%;
      z-index: 3;
    }

    .img2 {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      z-index: 4;
      margin: auto;
      animation: animation1 1s linear 0s infinite;
    }
  }
  .loading-title{
    width: 50%;
    color: #fff;
    text-align: center;
    font-size: 12px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 70px;
    margin: 0 auto;
  }
}
::v-deep .van-slider {
  position: absolute;
  top: 18px;
  height: 2px;
  .van-slider__button {
    position: absolute;
    top: -10px;
    right: -14px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #fff;
    background-clip: padding-box;
    border: 5px solid hsla(0, 0%, 100%, 0.6) !important;
  }
}
</style>